<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>文件上传系统</title>
    <!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" /> -->
    <link rel="stylesheet" href="/css/el.css" />
    <link rel="stylesheet" href="/css/fileList.css" />
    <script src="/js/vue.min.js"></script>
    <script src="/js/element-ui.js"></script>
</head>

<body>
    <div id="app">
        <div class="title">
            文件上传系统
            <div class="left">
                <div class="button-white" @click="recycleBox=true">回收站</div>
            </div>
            <div class="right">
                <div class="button-white" @click="mkdirDialog=true">创建文件夹</div>
                <div class="button-white" @click="showUpload = true">上传</div>
            </div>
        </div>
        <div class="head-box">
            <el-breadcrumb class="breadcrumb" separator="/" style="line-height: 1.3;">
                <el-breadcrumb-item v-for="(item,index) in pathList" :key="index">
                    <a @click="toPath(item,index)">{{item}}</a>
                </el-breadcrumb-item>
            </el-breadcrumb>
            <div class="filter">
                <el-input placeholder="筛选文件" v-model="filterText" class="input-with-select">
                </el-input>
            </div>
        </div>
        <!-- 列表展示 -->
        <div class="list" v-loading="isLoading">
            <el-table stripe :data="list2" class="table">
                <el-table-column width="50">
                    <template slot-scope="scope">
                        <img class="icon" :src="fileIcon(scope.row)">
                        </img>
                    </template>
                </el-table-column>
                <el-table-column sortable prop="filename" label="文件名" width="250">
                    <template slot-scope="scope">
                        <div @dblclick="itemClick(scope.row,itemClickText(scope.row))" class="filename">
                            {{scope.row.filename}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column sortable prop="size" label="文件大小" min-width="100">
                    <template slot-scope="scope">
                        <div>
                            {{ scope.row.folder ? '无':fileSizeFormat(scope.row.size)}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column sortable prop="updateDate" width="200" label="上次修改时间">
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="120">
                    <template slot-scope="scope">
                        <!-- class="button-white directorty-button" -->
                        <el-button v-if="scope.row.folder&&scope.row.parent" style="width: 98px;"
                            @click="itemClick(scope.row)">
                            打开
                        </el-button>
                        <el-dropdown v-else :type="scope.row.folder?null:'primary'" split-button
                            @click="itemClick(scope.row,itemClickText(scope.row))" trigger="click"
                            @command="e=>onCommmand(scope.row,e)">
                            {{itemClickText(scope.row)}}
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item v-for="(item,index) in menuItem(scope.row)" :key="index"
                                    :command="item.name">{{item.name}}</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                </el-table-column>
            </el-table>
            </ul>
        </div>
        <!-- 创建文件夹 -->
        <el-dialog title="创建文件夹" :visible.sync="mkdirDialog" :close-on-click-modal="false">
            <el-form :model="dirform" @submit.native.prevent>
                <el-form-item label="文件夹名称" label-width="100">
                    <input class="el-input__inner" ref="mkdirInput" v-model="dirform.name" :max="50"
                        @keyup.enter="mkdir" :placeholder="mkdirPlaceholder"></input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <div class="button-white" style="margin-right: 20px;" @click="mkdirDialog = false">取 消</div>
                <div class="button" @click="mkdir">确 定</div>
            </div>
        </el-dialog>
        <!-- 重命名 -->
        <el-dialog :title="'文件重命名'" :visible.sync="renameDialog" :close-on-click-modal="false">
            <input class="el-input__inner" ref="renameInput" v-model="renameFileNewName" :max="50" @keyup.enter="rename"
                :placeholder="mkdirPlaceholder"></input>
            <div slot="footer" class="dialog-footer">
                <div class="button-white" style="margin-right: 20px;" @click="renameDialog = false">取 消</div>
                <div class="button" @click="rename">确 定</div>
            </div>
        </el-dialog>
        <!-- 上传 -->
        <div id="upload" :class="showUpload?'':'upload-disable'">
            <iframe id="upload-iframe" src="/upload" frameborder="0" width="100%" height="100%"></iframe>
            <div class="close">
                <div class="button" @click="uploadHide">关闭</ditype=>
                </div>
            </div>
        </div>
        <el-dialog title="回收站" :visible.sync="recycleBox" width="80vw">
            <el-table :data="recoveryList" v-loading="isLoadRecovery" stripe>
                <el-table-column prop="filename" width="50">
                    <template slot-scope="scope">
                        <img class="icon-2" :src="fileIcon2(scope.row)">
                        </img>
                    </template>
                </el-table-column>
                <!--  width="350" -->
                <el-table-column min-width="300" property="filePath" label="文件"></el-table-column>
                <el-table-column property="deleteAt" label="加入回收站时间" width="150">
                    <template slot-scope="scope">
                        <div>{{dataFmt(scope.row.deleteAt)}}</div>
                    </template>
                </el-table-column>
                <el-table-column property="clearAt" label="计划清理时间" width="150">
                    <template slot-scope="scope">
                        <div>{{dataFmt(scope.row.clearAt)}}</div>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="120">
                    <template slot-scope="scope">
                        <div class="button-white" @click="onRecovery(scope.row)">恢复</div>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
        <!-- 预览 -->
        <el-dialog :title="previewCodeName" id="fill-scroll-dialog" overflow :modal="false" top="6vh"
            :visible.sync="isPreviewCode" width="80vw">
            <iframe id="previewCodeIframe" :src="previewCodeUrl" frameborder="0" width="100%"
                style="height: 75vh;"></iframe>
            <img src="/image/fill-scroll.svg" @click="previewFillScroll" class="fill-scroll-icon no-select">
            <img src="/image/copy-icon.svg" @click="copyCode" class="fill-scroll-icon2 no-select">
            <el-tooltip effect="dark" :open-delay="1000" content="编码格式" placement="left-start">
                <el-dropdown size="mini" class="encode" trigger="click" @command="e=>setEncodeing(e)">
                    <span class="el-dropdown-link no-select">
                        {{ encoding }}
                    </span>
                    <el-dropdown-menu slot="dropdown" @onComment>
                        <el-dropdown-item v-for="(item,index) in encodeings" :command="item"
                            :key="index">{{item}}</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-tooltip>
        </el-dialog>
        <div :class="{
            'upload-file-mask':true,
            'upload-file-mask-show':dropUpload
        }">
            把上传文件拖入
        </div>
    </div>
    <script>
        const dateFormat = (date, fmt = 'yyyy-MM-dd hh:mm:ss') => {
            let o = {
                'M+': date.getMonth() + 1, //月份
                'd+': date.getDate(), //日
                'h+': date.getHours(), //小时
                'm+': date.getMinutes(), //分
                's+': date.getSeconds(), //秒
                'q+': Math.floor((date.getMonth() + 3) / 3), //季度
                S: date.getMilliseconds(), //毫秒
            }
            if (fmt == null) {
                return date.toDateString()
            }
            if (/(y+)/.test(fmt))
                fmt = fmt.replace(
                    RegExp.$1,
                    (date.getFullYear() + '').substr(4 - RegExp.$1.length)
                )
            for (let k in o)
                if (new RegExp('(' + k + ')').test(fmt))
                    fmt = fmt.replace(
                        RegExp.$1,
                        RegExp.$1.length == 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)
                    )
            return fmt
        }
        function getFilenameExt (filename) {
            var index = filename.lastIndexOf(".")
            if (index == -1) {
                return ''
            }
            var ext = filename.substr(index + 1)
            return ext
        }
    </script>
    <script>
        new Vue({
            el: '#app',
            data () {
                return {
                    path: '/',
                    list: [],
                    recoveryList: [],
                    isLoading: false,
                    isLoadRecovery: false,
                    showUpload: false,
                    mkdirDialog: false,
                    renameDialog: false,
                    isPreviewCode: false,
                    previewCodeUrl: '',
                    previewCodeFile: null,
                    recycleBox: false,
                    dirform: {
                        name: ''
                    },
                    mkdirPlaceholder: '文件名称不能包含 \\ / : * ? " < > |',
                    filterText: '',
                    recovery: false,
                    dropUpload: false,
                    previewCodeName: '',
                    encoding: 'UTF_8',
                    encodeings: ['UTF_8', 'US_ASCII', 'GBK', 'UTF_16', 'UNICODE', "BINARY"],
                    renameFileOldName: '',
                    renameFileNewName: ''
                }
            },
            methods: {
                uploadHide () {
                    this.showUpload = false
                },
                async getList () {
                    this.isLoading = true
                    const res = await fetch('/list', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({
                            path: this.path,
                        }),
                    }).then((res) => res.json())
                    if (res.result) {
                        this.list = res.data.sort((a, b) => {
                            if (a.folder && b.folder) return 0
                            if (b.folder) return 1
                            return -1
                        })
                    } else {
                        this.$message(res.msg)
                        if (res.msg === '路径错误') {
                            setTimeout(() => {
                                this.setPath('/')
                            }, 1000)
                        }
                    }
                    this.isLoading = false
                },
                async loadRecoveryList () {
                    this.isLoadRecovery = true
                    const res = await fetch('/recycle-list', { method: 'GET' }).then(res => res.json())
                    if (res.result) {
                        this.recoveryList = res.data
                    } else {
                        this.$message(res.msg)
                    }
                    this.isLoadRecovery = false
                },
                loadPath () {
                    const path = window.localStorage.getItem('path')
                    if (!path || typeof path != 'string') {
                        this.path = '/'
                        return
                    }
                    this.path = path
                },
                async mkdir () {
                    if (this.dirform.name.trim() == "") {
                        this.dirform.name = ''
                        this.$message("文件夹名称不能为空")
                        return
                    }
                    const dirReg = /[\\/:*?"<>|]/
                    if (dirReg.test(this.dirform.name)) {
                        this.$message(`文件夹名称不能包含 \\ / : * ? " < > |`)
                        return
                    }
                    for (let item of this.list) {
                        if (item.filename == this.dirform.name.trim()) {
                            this.$message("文件夹名称已存在")
                            return
                        }
                    }
                    const res = await fetch('/mkdir', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({
                            path: this.path,
                            folder: this.dirform.name.trim(),
                            secretKey: localStorage.getItem('secretKey')
                        }),
                    }).then((res) => res.json())
                    if (!res.result) {
                        if (res.msg == '请先获取权限') {
                            window.location.href = '/login'
                            return
                        }
                        this.$message(res.msg)
                        return
                    }
                    this.$message("创建成功")
                    this.getList()
                    this.mkdirDialog = false
                },
                async rename () {
                    if (this.renameFileNewName.trim() == this.renameFileOldName) {
                        this.renameDialog = false
                        return
                    }
                    if (this.renameFileNewName.trim() == "") {
                        this.renameFileNewName = ''
                        this.$message("文件名称不能为空")
                        return
                    }
                    const dirReg = /[\\/:*?"<>|]/
                    if (dirReg.test(this.renameFileNewName)) {
                        this.$message(`文件不能包含 \\ / : * ? " < > |`)
                        return
                    }
                    for (let item of this.list) {
                        if (item.filename == this.renameFileNewName.trim()) {
                            this.$message("文件名已存在")
                            return
                        }
                    }
                    if (getFilenameExt(this.renameFileOldName) != getFilenameExt(this.renameFileNewName)) {
                        try {
                            await this.$confirm("后缀名不一致,是否确定修改文件后缀名？", "提示", {
                                confirmButtonText: "确定",
                                cancelButtonText: "取消",
                                type: "warning"
                            })
                        } catch {
                            return
                        }
                    }


                    const res = await fetch('/rename', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({
                            path: this.path,
                            oldName: this.renameFileOldName,
                            newName: this.renameFileNewName.trim(),
                            secretKey: localStorage.getItem('secretKey')
                        }),
                    }).then((res) => res.json())
                    if (!res.result) {
                        if (res.msg == '请先获取权限') {
                            window.location.href = '/login'
                            return
                        }
                        this.$message(res.msg)
                        return
                    }
                    this.$message("修改文件名成功")
                    this.getList()
                    this.renameDialog = false
                },
                onRename (fileModel) {
                    this.renameFileOldName = fileModel.filename
                    this.renameFileNewName = fileModel.filename
                    this.renameDialog = true
                },
                setPath (path) {
                    this.path = path
                    window.localStorage.setItem('path', path)
                    this.getList()
                },
                itemClick (item, type) {
                    if (item.folder) {
                        if (item.parent) {
                            const paths = [...this.pathList]
                            paths.shift()
                            paths.pop()
                            this.setPath('/' + paths.join('/'), -1)
                            return
                        }
                        this.toPath(item.filename, -1)
                        return
                    }
                    switch (type) {
                        case "下载": this.onDownload(item); break
                        case "预览": this.onPreView(item); break
                    }
                },
                onCommmand (fileModel, e) {
                    switch (e) {
                        case '预览': this.onPreView(fileModel); break
                        case '删除': this.onDelete(fileModel); break
                        case '下载': this.onDownload(fileModel); break
                        case '重命名': this.onRename(fileModel); break
                    }
                },
                onDownload (fileModel) {
                    const element = document.createElement('a')
                    element.href = fileModel.downLink
                    element.download = fileModel.filename
                    element.click()
                },
                onPreView (fileModel) {
                    const type = this.getFileType(fileModel.filename)
                    const previewExt = ['img', 'video', 'audio']
                    if (type != null && previewExt.includes(type.type)) {
                        const element = document.createElement('a')
                        element.href = fileModel.downLink.replace("/download/", '/preview/')
                        element.setAttribute("target", "_blank")
                        element.click()
                        return
                    }
                    this.onPreViewCode(fileModel)
                },
                onPreViewCode (fileModel) {
                    if (fileModel.size === 0) {
                        this.$message.warning("文件为空")
                        return
                    }
                    if (fileModel.size >= 1024 * 1024 * 3) {
                        this.$message.warning("文件过大，无法预览")
                        return
                    }
                    const type = this.getFileType(fileModel.filename)
                    if ((type !== null) && (['doc', 'exe', 'zip'].includes(type.type))) {
                        this.encoding = "BINARY"
                    } else {
                        this.encoding = "UTF_8"
                    }
                    const url = fileModel.downLink.replace("/download/", '/previewCode/') + "?charset=" + this.encoding
                    if (document.body.clientWidth > 800) {
                        this.previewCodeFile = fileModel
                        this.isPreviewCode = true
                        this.previewCodeName = fileModel.filename
                        this.previewCodeUrl = url
                        return
                    }
                    const element = document.createElement('a')
                    element.href = url
                    element.setAttribute("target", "_blank")
                    element.click()
                },
                previewFillScroll () {
                    this.isPreviewCode = false
                    const element = document.createElement('a')
                    element.href = this.previewCodeUrl
                    element.setAttribute("target", "_blank")
                    element.click()
                },
                setEncodeing (e) {
                    this.encoding = e
                    if (this.previewCodeFile == null) {
                        this.$message("修改编码失败")
                        return

                    }
                    const url = this.previewCodeFile.downLink.replace("/download/", '/previewCode/') + "?charset=" + this.encoding
                    this.previewCodeUrl = url
                },
                copyCode () {
                    const previewCodeIframe = document.getElementById('previewCodeIframe')
                    if (previewCodeIframe.contentWindow && previewCodeIframe.contentWindow.code) {
                        this.$message("拷贝成功")
                        navigator.clipboard.writeText(previewCodeIframe.contentWindow.code)
                    } else {
                        this.$message("拷贝失败")
                    }

                },
                async onRecovery (model) {
                    const res = await fetch('/recycle-recovery', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({ path: model.filePath, secretKey: localStorage.getItem('secretKey') })
                    }).then(res => res.json())
                    if (!res.result) {
                        if (res.msg == '请先获取权限') {
                            window.location.href = '/login'
                            return
                        }
                        this.$message(res.msg)
                        return
                    } else {
                        this.$message(res.data)
                        this.recovery = true
                        this.loadRecoveryList()
                    }
                },
                onDelete (fileModel) {
                    this.$confirm('此操作将文件加入回收站，延后删除, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(async () => {
                        const res = await fetch('/push-recycle',
                            {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                },
                                body: JSON.stringify({
                                    path: `${this.path}${this.path === '/' ? '' : '/'}${fileModel.filename}`,
                                    secretKey: localStorage.getItem('secretKey')
                                }),
                            }).then((res) => res.json())
                        if (!res.result) {
                            if (res.msg == '请先获取权限') {
                                window.location.href = '/login'
                                return
                            }
                            this.$message(res.msg)
                        } else {
                            this.$message(res.data)
                            this.getList()
                        }
                    })

                },
                toPath (path, index) {
                    if (index === this.pathList.length - 1) return
                    if (this.pathList.length === 1) {
                        this.setPath(`/${path}`)
                        return
                    }
                    if (index === 0) {
                        this.setPath('/')
                        return
                    }
                    if (index !== -1) {
                        const arr = this.pathList.slice(0, index + 1)
                        arr.shift()
                        this.setPath('/' + arr.join('/'))
                    } else {
                        const arr = [...this.pathList]
                        arr.shift()
                        this.setPath(`/${arr.join('/')}/${path}`)
                    }
                },
                getFileType (filename) {
                    if (!filename) return null
                    filename = filename.toLowerCase()
                    const extList = [
                        {
                            type: 'img',
                            icon: "/image/img-icon.svg",
                            ext: ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'webp', 'ico']
                        },
                        {
                            type: 'video',
                            icon: "/image/video-icon.svg",
                            ext: ['mp4', 'avi', 'rmvb', 'mkv']
                        },
                        {
                            type: 'audio',
                            icon: "/image/audio-icon.svg",
                            ext: ['mp3', 'wav', 'flac']
                        },
                        {
                            type: 'doc',
                            icon: "/image/doc-icon.svg",
                            ext: ['doc', 'docx', 'txt', 'pdf', 'xls', 'xlsx']
                        },
                        {
                            type: 'zip',
                            icon: "/image/zip-icon.svg",
                            ext: ['zip', 'rar', '7z', 'tar', 'gz', 'bz2', 'xz']
                        },
                        {
                            type: "code",
                            icon: "/image/code-icon.svg",
                            ext: ['cpp', 'c', 'php', 'java', 'py', 'js', 'css', 'html', 'json', 'md',
                                'ts', 'qml', 'cs', 'scss', 'sql', 'yml', 'xml', 'yqml', 'txt', 'iml',
                                'vue', 'properties', 'gitignore', 'env', 'bat', 'cmd', 'sh']
                        },
                        {
                            type: "exe",
                            icon: "/image/exe-icon.svg",
                            ext: ['exe', 'msi', 'dll', 'class', 'jar', 'so', 'a', 'elf', 'apk', 'ipa', 'deb']
                        }
                    ]
                    for (let i = 0; i < extList.length; i++) {
                        const item = extList[i]
                        for (let endExt of item.ext) {
                            if (filename.endsWith("." + endExt) || filename.endsWith("." + endExt.toUpperCase())) {
                                return item
                            }
                        }
                    }
                    return null
                },
                dropEvent (event) {
                    // 阻止事件的默认行为
                    event.preventDefault()
                    if (event.type === 'drop') {
                        const iframe = document.getElementById('upload-iframe')
                        // 文件进入并松开鼠标,文件边框恢复正常
                        for (let file of event.dataTransfer.files) {
                            console.log(file)
                            if (file.type == '' && file.size == 0)//文件夹跳过
                                continue
                            iframe.contentWindow.setFileValue(file)
                            this.showUpload = true
                        }
                        this.dropUpload = false
                    } else if (event.type === 'dragleave') {
                        // 离开时边框恢复
                        this.dropUpload = false
                    } else {
                        // 进入边框变为红色
                        this.isPreviewCode = false
                        this.mkdirDialog = false
                        this.recycleBox = false
                        this.dropUpload = true
                    }
                }
            },
            computed: {
                itemClickText () {
                    return (fileModel) => {
                        if (fileModel.folder) {
                            return '打开'
                        }
                        const type = this.getFileType(fileModel.filename)
                        if (type == null) {
                            return '下载'
                        }
                        const downType = ['doc', 'zip', 'exe']
                        if (downType.includes(type.type)) {
                            return '下载'
                        }
                        return '预览'
                    }
                },
                pathList () {
                    if (this.path === '/') {
                        return ['root']
                    }
                    return ['root', ...this.path.split('/').filter((item) => item !== '')]
                },
                /**
                 * 文件大小格式化
                 */
                fileSizeFormat () {
                    // size 单位字节
                    return (size) => {
                        if (size === 0) {
                            return '0B'
                        }
                        let k = 1024
                        let sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
                        let i = Math.floor(Math.log(size) / Math.log(k))
                        return (size / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i]
                    }
                },
                list2 () {
                    let list = [...this.list]
                    if (this.filterText.trim() !== '') {
                        list = list.filter((item) => item.filename.includes(this.filterText.trim()))
                    }
                    if (this.pathList.length === 1) {
                        return list
                    }
                    return [{
                        "filename": "..",
                        "size": 0,
                        "downLink": "",
                        "parent": true,
                        "updateDate": "",
                        "folder": true
                    }, ...list]
                },
                isPreView () {
                    return (fileModel) => {
                        if (fileModel.folder) {
                            return false
                        }
                        const type = this.getFileType(fileModel.filename)
                        if (type == null) {
                            return false
                        }
                        const preViewType = ['img', 'video', 'audio', 'code']
                        return preViewType.includes(type.type)
                    }
                },
                fileIcon () {
                    return (fileModel) => {
                        const folder = fileModel.folder
                        const filename = fileModel.filename
                        if (folder) {
                            return '/image/folder-icon.svg'
                        }
                        const type = this.getFileType(filename)
                        if (type != null) {
                            return type.icon
                        }
                        return '/image/file-icon.svg'
                    }
                },
                fileIcon2 () {
                    return (fileModel) => {
                        const folder = fileModel.folder
                        const filename = fileModel.filePath
                        if (folder) {
                            return '/image/folder-icon.svg'
                        }
                        const type = this.getFileType(filename)
                        if (type != null) {
                            return type.icon
                        }
                        return '/image/file-icon.svg'
                    }
                },
                menuItem () {
                    return (fileModel) => {
                        const menuList = [{
                            name: '预览',
                            show: () => {
                                if (this.itemClickText(fileModel) == '预览') {
                                    return false
                                }
                                return !fileModel.folder
                                // this.isPreView(fileModel)
                            }
                        },
                        {
                            name: '下载',
                            show: () => {
                                if (this.itemClickText(fileModel) == '下载') {
                                    return false
                                }
                                return !fileModel.folder
                            }
                        },
                        {
                            name: '重命名',
                            show: true
                        },
                        {
                            name: '删除',
                            show: true
                        },
                        ]
                        return menuList.filter((item) => item.show.call ? item.show() : item.show)
                    }
                },
                dataFmt () {
                    return date => {
                        return dateFormat(new Date(date), 'yyyy-MM-dd hh:mm')
                    }
                },

            },
            watch: {
                mkdirDialog (val) {
                    if (val) {
                        // console.log(this.$refs);
                        setTimeout(() => {
                            this.$refs.mkdirInput.focus()
                        }, 20)
                    } else {
                        this.dirform.name = ''
                    }
                },
                renameDialog (val) {
                    if (val) {
                        setTimeout(() => {
                            this.$refs.renameInput.focus()
                        }, 20)
                    }
                },

                showUpload (newv, oldv) {
                    if (!newv) {
                        this.getList()
                        document.getElementById('upload-iframe').contentWindow?.clearFile()
                    }
                },
                recycleBox (val) {
                    if (val) {
                        this.loadRecoveryList()
                    } else if (this.recovery) {
                        this.recovery = false
                        this.getList()
                    }
                },
            },
            created () {
                this.loadPath()
                this.getList()

                const droptarget = window
                droptarget.addEventListener("dragenter", this.dropEvent)
                droptarget.addEventListener("dragover", this.dropEvent)
                droptarget.addEventListener("drop", this.dropEvent)
                droptarget.addEventListener("dragleave", this.dropEvent)
                window.dropEventFun = (e) => this.dropEvent(e)
                window.$confirm = this.$confirm
                window.$message = this.$message
            },
        })
    </script>
    <script>
        window.addEventListener('message', (e) => {
            console.log('父message事件：', e.data)
            if (e.data == 'login') {
                window.location.href = '/login'
            }
        })
    </script>
</body>

</html>